import { init } from 'snabbdom/build/init'
import { h } from 'snabbdom/build/h'

const patch = init([])

// h 函数用来创建虚拟dom，这里创建的是 VNode 的虚拟节点，VNode 的作用是用来描述真实dom
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串就是标签中的文本内容
let vnode = h('div#container.cls', {
  hook: {
    init(vnode) {
      console.log(vnode.elm)
    },
    create(emptyNode, vnode) {
      console.log(vnode.elm)
    }
  }
}, 'hello world')
let app = document.querySelector('#app')

// patch 将虚拟dom 转换成真实dom 挂载到 dom 树上
// 第一个参数：旧的 VNode，可以是DOM元素，如果是DOM元素会将这个DOM元素转换成VNode
// 第二个参数：新的VNode
// 返回新的 VNode
// patch 会对比两个VNode，将差异更新到真实dom，并且把第二个参数返回
// 以下这行代码是将html中的 ‘div#app’ 修改为 vnode
let oldVnode = patch(app, vnode)

vnode = h('div#container.xxx', 'hello snabbdom')
patch(oldVnode, vnode)